<html>

<head>

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8">

<title>Media Player Classic - Home Cinema</title>

<script language="JavaScript" type="text/JavaScript">

function getXMLHTTP()
{
	try {return new ActiveXObject("Msxml2.XMLHTTP");}
	catch(e) {try {return new ActiveXObject("Microsoft.XMLHTTP");}
	catch(e) {}}
	if(typeof XMLHttpRequest != "undefined") {return new XMLHttpRequest();}
	return null;
}

function MakeRequest(req)
{
	var httpRequest = getXMLHTTP();
	
	try
	{
		httpRequest.open("GET", req, true);
		httpRequest.send(null);
	}
	catch(e)
	{
	}
}

function urlencode(s)
{
	if(encodeURIComponent) return encodeURIComponent(s);
	if(escape) return escape(s);
	return s; // whatever
}

function getOffsetX(m)
{
	var x = m.offsetLeft;
	while (m.offsetParent)	{x += (m = m.offsetParent).offsetLeft; }
	return x;
}

OnStatus = function(title, status, pos, posstr, dur, durstr, muted, volume)
{
	var maxtitle = 70;
	if(title.length > maxtitle) title = title.substr(0, maxtitle-3) + '...';
	var timestr = dur > 0 && posstr && durstr ? posstr + '&nbsp;/&nbsp;' + durstr : '&nbsp;';
	if(!dur || dur == 0) dur = 1;	
	var sbpercent = Math.floor(100*pos/dur);

	if(e = document.getElementById('title')) e.innerHTML = title;
	if(e = document.getElementById('seekbarchleft')) e.width = sbpercent > 0 ? sbpercent + '%' : '1px';
	if(e = document.getElementById('seekbarchright')) e.width = sbpercent < 100 ? (100 - sbpercent) + '%' : '1px';
	if((e = document.getElementById('status')) && e.innerHTML != status) e.innerHTML = status;
	if((e = document.getElementById('timer')) && e.innerHTML != timestr) e.innerHTML = timestr;
	if(e = document.getElementById('controlvolumemute')) {url = 'url(controlvolume' + (muted?'off':'on') + '.png)'; if(e.style.backgroundImage != url) e.style.backgroundImage = url;}
	if(e = document.getElementById('controlvolumegrip')) 
	{
		volume = (document.getElementById('controlvolumebar').offsetWidth - e.offsetWidth) * volume / 100;
		e.style.position = 'relative';
		e.style.top = '2px';
		e.style.left = Math.floor(volume) + 'px';
	}
}

var httpRequestStatus;

function OnReadyStateChange()
{
	if(httpRequestStatus && httpRequestStatus.readyState == 4 && httpRequestStatus.responseText)
	{
		if(httpRequestStatus.responseText.charAt(0) != "<") eval(httpRequestStatus.responseText);
		else {alert(httpRequestStatus.responseText);}
		httpRequestStatus = null;
  }
}

function StatusLoop()
{
	if(!httpRequestStatus || httpRequestStatus.readyState == 0)
	{
		httpRequestStatus = getXMLHTTP();

		try
		{
			httpRequestStatus.open("GET", 'status.html', true);
			httpRequestStatus.onreadystatechange = OnReadyStateChange;
			httpRequestStatus.send(null);
		}
		catch(e)
		{
		}
	}
		
	setTimeout("StatusLoop()", 500);
}

var snapshotcounter = 0;

function LoadSnapShot()
{
	if(img = document.getElementById('snapshot'))
	{
		img.src = 'snapshot.jpg' + '?' + snapshotcounter++;
	}
}

function OnLoadSnapShot()
{
	setTimeout("LoadSnapShot()", 5000);
}

function OnAbortErrorSnapShot(e)
{
	setTimeout("LoadSnapShot()", 10000);
}

function OnSeek(e)
{
	left = right = 0;
	if(sb = document.getElementById('seekbarchleft')) left = getOffsetX(sb);
	if(sb = document.getElementById('seekbarchright')) {right = getOffsetX(sb) + sb.offsetWidth;}
	if(sb = document.getElementById('seekbargrip')) {left += sb.offsetWidth / 2; right -= sb.offsetWidth / 2;}
	if(left > 0 && left < right)
	{
		percent = 100 * ((window.event ? window.event.clientX : e.clientX) - left) / (right - left);
		if(percent < 0) percent = 0;
		else if(percent > 100) percent = 100;
		
		MakeRequest('command.html?wm_command=[setposcommand]&percent='+percent);
	}
}

function OnVolume(e)
{
	left = right = 0;
	if(cv = document.getElementById('controlvolumebar')) {left = getOffsetX(cv)+3; right = getOffsetX(cv) + cv.offsetWidth-3;}
	if(left > 0 && left < right)
	{
		percent = 100 * ((window.event ? window.event.clientX : e.clientX) - left) / (right - left);
		if(percent < 0) percent = 0;
		else if(percent > 100) percent = 100;

		MakeRequest('command.html?wm_command=[setvolumecommand]&volume='+percent);
	}
}

function OnCommand(id)
{
	MakeRequest('command.html?wm_command='+id);
}

function Init()
{
	StatusLoop();
	LoadSnapShot();

	if(e = document.getElementById('seekbar'))
		e.onclick = OnSeek;

	if(e = document.getElementById('controlvolumebar'))
		e.onclick = OnVolume;
}

</script>

<style>
img {padding: 0; margin: 0; border: 0;}
#player {margin-left: auto; margin-right: auto;}
#player td {font-family: Sans-Serif; font-size: 13px;}
#header {width: 100%;}
#header td {height: 30px;}
#headericon {background-image: url(headericon.png); background-repeat: no-repeat; width: 22px;}
#headerback {background-image: url(headerback.png); background-repeat: repeat-x; color: white; font-weight: bold; padding-top: 5px}
#headerclose {background-image: url(headerclose.png);  background-repeat: no-repeat; width: 28px;}
#title, #status, #posstr, #durstr {display: inline;}
#menu td {font-family: Sans-Serif; font-size: 12px; padding: 1px 5px;}
#menu, #controlbar {background-color: #ece6d4;}
#statusbar td {font-family: Sans-Serif; font-size: 12px;}
#video, #statusbar {background-color: black; color: white;}
#video {padding: 1px; cursor: pointer;}
#controlbar {background-image: url(controlback.png); background-repeat: repeat-x; height: 28px;}
#controlbuttonplay {background-image: url(controlbuttonplay.png); background-repeat: no-repeat; width: 25px; height: 28px;}
#controlbuttonpause {background-image: url(controlbuttonpause.png); background-repeat: no-repeat; width: 23px; height: 28px;}
#controlbuttonstop {background-image: url(controlbuttonstop.png); background-repeat: no-repeat; width: 25px; height: 28px;}
#controlbuttonskipback {background-image: url(controlbuttonskipback.png); background-repeat: no-repeat; width: 24px; height: 28px;}
#controlbuttondecrate {background-image: url(controlbuttondecrate.png); background-repeat: no-repeat; width: 22px; height: 28px;}
#controlbuttonincrate {background-image: url(controlbuttonincrate.png); background-repeat: no-repeat; width: 23px; height: 28px;}
#controlbuttonskipforward {background-image: url(controlbuttonskipforward.png); background-repeat: no-repeat; width: 28px; height: 28px;}
#controlbuttonstep {background-image: url(controlbuttonstep.png); background-repeat: no-repeat; width: 31px; height: 28px;}
#controlvolumemute {background-image: url(controlvolumeon.png); background-repeat: no-repeat; width: 28px; height: 28px;}
#controlvolumebar {background-image: url(controlvolumebar.png); background-repeat: no-repeat; width: 55px; height: 28px;}
#seekbar {background-image: url(seekbarmid.png); background-repeat: repeat-x;}
#seekbar td {height: 15px;}
#center {width: 100%;}
#leftside {background-image: url(leftside.png); background-repeat: repeat-y; width: 4px;}
#rightside {background-image: url(rightside.png); background-repeat: repeat-y; width: 4px;}
#leftbottomside {background-image: url(leftbottomside.png); background-repeat: repeat-x; width: 4px; height: 4px;}
#bottomside {background-image: url(bottomside.png); background-repeat: repeat-x; height: 4px;}
#rightbottomside {background-image: url(rightbottomside.png); background-repeat: repeat-x; width: 4px; height: 4px;}
</style>

</head>

<body onload="Init()">

	<div align="center">
	<table id="player" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3">
			<table id="header" cellpadding="0" cellspacing="0">
				<tr>
					<td id="headericon"></td>
					<td id="headerback"><nobr>&nbsp;<div id="title"></div>&nbsp;</nobr></td>
					<td id="headerclose" onclick="OnCommand(816)"></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td id="leftside"></td>
		<td>
			<table cellpadding="0" cellspacing="0" id="center">
				<tr>
					<td>
						<table id="menu" width="100%">
							<tr>
								<td>File</td>
								<td>View</td>
								<td>Play</td>
								<td>Navigate</td>
								<td>Favorites</td>
								<td width="100%" align="right">Help</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td id="video" align="center" onclick="OnCommand(889)">
						<img src="snapshot.png" alt="snapshot" id="snapshot" onload="OnLoadSnapShot()" onabort="OnAbortErrorSnapShot()" onerror="OnAbortErrorSnapShot()" />
					</td>
				</tr>
				<tr>
					<td>
						<table width="100%" id="seekbar" cellpadding="0" cellspacing="0">
							<tr>
								<td id="seekbarleft"><img src="seekbarleft.png"></td>
								<td id="seekbarchleft" width="0%"></td>
								<td id="seekbargrip"><img src="seekbargrip.png"></td>
								<td id="seekbarchright" width="100%"></td>
								<td id="seekbarright"><img src="seekbarright.png"></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>
						<table width="100%" cellpadding="0" cellspacing="0" id="controlbar">
							<tr>
								<td id="controlbuttonplay" onclick="OnCommand(887)"></td>
								<td id="controlbuttonpause" onclick="OnCommand(888)"></td>
								<td id="controlbuttonstop" onclick="OnCommand(890)"></td>
								<td id="controlbuttonskipback" onclick="OnCommand(920)"></td>
								<td id="controlbuttondecrate" onclick="OnCommand(894)"></td>
								<td id="controlbuttonincrate" onclick="OnCommand(895)"></td>
								<td id="controlbuttonskipforward" onclick="OnCommand(921)"></td>
								<td id="controlbuttonstep" onclick="OnCommand(891)"></td>
								<td>&nbsp;</td>
								<td id="controlvolumemute" onclick="OnCommand(909)"></td>
								<td id="controlvolumebar" valign="top"><img src="controlvolumegrip.png" id="controlvolumegrip"></td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>
						<table width="100%" id="statusbar">
							<tr>
								<td><div id="status"></div></td>
								<td align="right"><div id="timer">&nbsp;</div></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</td>
		<td id="rightside"></td>
	</tr>
	<tr>
		<td id="leftbottomside"></td>
		<td id="bottomside"></td>
		<td id="rightbottomside"></td>
	</tr>
	</table>
	</div>
</body>

</html>